<template>
  <div>

	<myheader :totalcount='this.totalcount()' :totalprice="this.totalprice()"></myheader>
	<section class="featured-block text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-6 text-center">
					<div class="product-image mt-3">
						<img class="img-fluid" :src="img">
					</div>
					<div class="product-thumbnails"><a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
							<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<a href="#">
						<img class="mt-2 mr-2 img-fluid" src="../assets/images/placeholder-product.jpg" ></a>
						<div>
							<Button :circle='true' @click='goodfollow' >{{gzbutton}}</Button>
							关注数：{{count}}
							人员名单：<span v-for="(item, index) in guanzhu" :key="index">{{item.username}},</span>
						</div>
					</div>
				</div>
				<div class="col-md-6 mt-5 mt-md-2 text-center text-md-left">
					<h2 class="mb-3 mt-0">{{name}}</h2>
					<p class="lead mt-2 mb-3 primary-color">${{price}}</p>
					<h5 class="mt-4">Description</h5>
					<p>{{desc}}</p>
					<p>颜色：{{color}}</p>
					<p>大小：{{size}}</p>
					<p>季节：{{season}}</p>
					<h5 class="mt-5">Care Instructions</h5>
					<p>Suspendisse cursus erat sed sem sagittis cursus. Etiam porta sem malesuada magna mollis euismod.</p>
					<select class="custom-select form-control mt-4 mb-4">
						<option selected>Size</option>
						<option value="1">Small</option>
						<option value="2">Medium</option>
						<option value="3">Large</option>
					</select>
					
					<!--Quantity: <input type="text" class="form-control quantity mb-4" name="" value="1">-->
					
					<a href="javascript:void(0)" class="btn btn-full-width btn-lg btn-outline-primary" @click="addcart">Add to cart加入购物车</a></div>
			</div>
		</div>
	</section>
	
	<div class="divider"></div>

	<section class="featured-block text-center">
		<div class="container">
			<Table :datas="contentlist" :columns="columns"></Table>

			<Pagination v-model="pagination" @change="currentChange" align="center" :small="true" layout="total,sizes,pager,jumper" ></Pagination>
			<div style="text-align: left; margin-bottom: 1em;">
				<textarea  v-model="content" style="width: 98%; height: 200px;"></textarea>
			</div>
			<Button color='red' @click='comment' >
				<i class="h-icon-edit">
				</i>
				<span style="font-size: 1.23em;">评论</span>
			</Button>
		</div>
	</section>
	
	<div class="divider"></div>
	
	<section class="products text-center">
		<div class="container">
			<h3 class="mb-4">Related Products</h3>
			<div class="row">
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
				<div class="col-sm-6 col-md-3 col-product">
					<figure>
						<img class="rounded-corners img-fluid" src="../assets/images/placeholder-product.jpg"	width="240" height="240">
						<figcaption>
							<div class="thumb-overlay"><a href="#" title="More Info">
								<i class="fas fa-search-plus"></i>
							</a></div>
						</figcaption>
					</figure>
					<h4><a href="#">Product Name</a></h4>
					<p><span class="emphasis">$19.00</span></p>
				</div>
			</div>
		</div>
	</section>
	
	<myfooter></myfooter>
    
  </div>
  
</template>


 
<script>
import myheader from './myheader';
import myfooter from './myfooter';

export default {
	name:'item',
	data () {
    return {
		msg: "这是一个变量",
		id:'',
		name:'',
		price:0,
		desc:'',
		img : '',
		color:"",
		size:'',
		season:'',
		//评论内容
		content:"",
		contentlist:[],
		columns:[
			{
			title: 'ID',
			prop: 'uid',
			width: 100,
			tooltip: true,
			placement: 'top-start',
			content: '<div class="table-tr-tooltip">用户<hr>说明：用户的ID</div>'
				},
			{ title: 'Comment',
				prop: 'content',
				align: 'center',
				tooltip: { placement: 'top-start', content: '<div class="table-tr-tooltip">评论<hr>说明：用户的评论</div>' } 
				},
				],
		myuserdict:{},
		pagination: {
			page: 1,
			size: 10,
			total: 50
			},
		guanzhu:[],
		count:'',
		//关注按钮状态
		type:0,
		gzbutton:'+关注',
		//购物车
		cartlist:[],
		}
	},
    components:{
		'myheader':myheader,
		'myfooter':myfooter,
	},
	beforeCreate() {
		window.that  = this;
		
	},
	created() {
		//调用用户列表
		this.get_User();
	},
    mounted:function(){
		this.axios({
			url:'http://127.0.0.1:8000/gooditem/',
			params:{
				gid:this.$route.query.gid
			}
		}).then(resp=>{
			// console.log(resp)
			this.id = resp.data.data.id
			this.name = resp.data.data.name;
			this.price = resp.data.data.price;
			this.desc = resp.data.data.desc;
			this.img = 'http://127.0.0.1:8000/static/upload/'+resp.data.data.img;
			var parms = resp.data.data.parms;
			//转换
			parms = JSON.parse(parms)
			this.color = parms.color
			this.size = parms.size
			this.season = parms.season
		})
    this.get_comments();
	this.goodfollow();
	this.init_cart()
},
	methods:{
		//计算价格
		totalprice(){
			var price = 0
			for (let index = 0; index < this.cartlist.length; index++) {
				price += (this.cartlist[index].num * this.cartlist[index].price)
			}
			return price
		},
		//计算购物车数量
		totalcount(){
			var count = 0
			for (let index = 0; index < this.cartlist.length; index++) {
				count += this.cartlist[index].num
			}
			return count
		},
		//初始化购物车
		init_cart(){
			// 初始化购物车
			if (localStorage.getItem("cart")){
				this.cartlist = JSON.parse(localStorage.getItem("cart"));
			}
			else{
				this.cartlist = []
			}
		},
		//加入购物车
		addcart(){
			
			var find = 0 
			//遍历
			for (let index = 0; index < this.cartlist.length; index++) {
				
				//找到了
				if (this.id == this.cartlist[index]['id']) {
					// 将该商品数量+1
					this.cartlist[index]['num'] ++;
					find = 1;
					break
				}
			}
			if (find == 0) {
				this.cartlist.push({"name":this.name,'id':this.id,"price":this.price,'num':1,'pic':this.img})
			}
			console.log(this.cartlist)
			//存入localstorge
			localStorage.setItem("cart",JSON.stringify(this.cartlist))
			this.$router.go(0)
		},
		//商品被多少人关注
		goodfollow(){
			if (this.type == 1) {
				this.gzbutton = '已关注'
				this.type = 0
			}
			else if(this.type ==0){
				this.gzbutton = '+关注'
				this.type = 1
			}
			this.axios.get("http://127.0.0.1:8000/goodfollow/",{params:{gid:this.$route.query.gid,uid:localStorage.getItem("uid"),type:this.type}}).then(resp=>{
				console.log(resp)
				this.$Message(resp.data.message)
				this.guanzhu = resp.data.data
				this.count = resp.data.data.length
				// console.log(this.count)
				// console.log(this.guanzhu)
			})
		},
		//分页
		currentChange(value) {
			console.log(value);
		},
		//获取所有用户
		get_User(){
			this.axios.get('http://127.0.0.1:8000/userlist/').then(res=>{
			//动态赋值
			for (let index = 0; index < res.data.length; index++) {
				this.myuserdict[res.data[index].id] = res.data[index].username;
			}
		})
		},
		//获取评论
		get_comments(){
			this.axios.get('http://127.0.0.1:8000/commentlist/',{params:{id:this.$route.query.gid}}).then(resp=>{
				this.contentlist = resp.data.data
				
				for (let index = 0; index < this.contentlist.length; index++) {
					// console.log(this.contentlist[index].uid)
					//在mothods中调用自定义的过滤器
					this.contentlist[index].uid = this.$options.filters['myfilter'](this.contentlist[index].uid)
					
				}
				//此处注意用户列表与评论的获取必须分别放在不同的钩子方法中，不然会因为获取先后的问题出现无法赋值
			})
		},
	  //评论方法
		comment(){
			if (this.content == '') {
				this.$Message('评论内容不能为空')
				return false;
			}
			this.axios.post(
				'http://127.0.0.1:8000/insertcomment/',
				//直接传递JSON数据过去
				this.qs.stringify({content:this.content,uid:localStorage.getItem("uid"),gid:this.$route.query.gid})
			).then(resp=>{
				if (resp.data.code ==200) {
					this.$Message(resp.data.message);
					//实时添加评论（不用刷新页面的方法，使用unshift）
					this.contentlist.unshift({"uid":localStorage.getItem('uid'),"content":this.content});
					this.content = ''
					// window.location.reload()
				}
				if (resp.data.code ==403) {
					this.$Message(resp.data.message);
				}
			})
			
		}
	
},
	filters:{
		myfilter(value){
			//通过key（用户id）取用户名
			return window.that.myuserdict[value];
		}
},

}
	
</script>

<style>



</style>